import React, { useRef, useState, useEffect } from 'react'
import { NavigationStackScreenComponent } from 'react-navigation-stack'
import { View, Text, TextInput, TouchableOpacity, Image } from 'react-native'
import { commonStyle, translateSize } from 'styles'
import { RadiusButton, Toast } from 'components'
import { inputIdentityStyle } from './style'
import assets from 'modules/assets'
import ModalDropdown from 'react-native-modal-dropdown'
import { operate } from 'services/authorization';

const InputIdentityScreen: NavigationStackScreenComponent<{ nextRouteName: string, type: 'telphone' | 'idcard' }> = props => {
	const dropdownRef = useRef<ModalDropdown>();
	const [inputType, setInputType] = useState<'telphone' | 'idcard'>()
	const inputVaule = useRef('')
	useEffect(() => {
		setInputType(props.navigation.getParam('type'))
	}, []);
	useEffect(() => { props.navigation.setParams({ type: inputType }); }, [inputType])

	return (
		<View style={[commonStyle.containerColumn, inputIdentityStyle.container]}>
			<ModalDropdown
				ref={ref => { dropdownRef.current = ref }}
				dropdownStyle={{ width: '90%' }}
				dropdownTextStyle={{ fontSize: translateSize(32) }}
				options={['电话号码', '身份证号码']}
				onSelect={(index: string, option: string) => {
					setInputType(option == '电话号码' ? 'telphone' : 'idcard')
				}}>
				<TouchableOpacity
					style={[commonStyle.containerRow, inputIdentityStyle.typeContainer]}
					onPress={() => { operate(); dropdownRef.current.show() }}>
					<Text style={inputIdentityStyle.typeContent}>{inputType == 'idcard' ? '身份证' : '电话号码'}</Text>
					<Image style={inputIdentityStyle.typeIcon} source={assets.images.icon_arrow_right} />
				</TouchableOpacity>
			</ModalDropdown>
			<TextInput
				style={[inputIdentityStyle.typeContainer, inputIdentityStyle.typeContent]}
				keyboardType={inputType == 'idcard' ? 'email-address' : 'number-pad'}
				onChangeText={text => {
					inputVaule.current = text
				}}
			/>
			<RadiusButton
				style={inputIdentityStyle.btn}
				onPress={() => {
					if (inputVaule.current == '') {
						Toast.show(inputType == 'idcard' ? '请输入身份证号码' : '请输入电话号码')
						return
					}
					props.navigation.navigate(props.navigation.getParam('nextRouteName'), { data: inputType == 'idcard' ? { idNumber: inputVaule.current } : { tell: inputVaule.current } })
				}}>
				<Text style={inputIdentityStyle.btnContent}>确定</Text>
			</RadiusButton>
		</View>
	)
}

InputIdentityScreen.navigationOptions = props => {
	return {
		title: props.navigation.getParam('type') == 'idcard' ? '身份证' : '电话号码',
	}
}

export default InputIdentityScreen
